import { useSelector, useDispatch } from "react-redux" 
import React,{RefObject,useRef} from "react"
// 引入index中的RootState类型  js项目不需要
import { AppDispatch, RootState } from "@/store" 

// 引入functions
import { decrement, increment } from "@/store/modules/counterSlice"
interface refData{
    current:any
}

function Page404(){
    const count = useSelector((state: RootState) => state.counter.value)
    const dispatch: AppDispatch = useDispatch() // 异步函数必须加AppDispatch类型，否则报错，同步可以不添加
    //  获取标签 组件的ref 使用useRef<HTMLInputElement>(null) 
    // 只能这样操作，不然下面类型检查会报错
    const inputRef=useRef<HTMLInputElement>(null) 
    const getRef=()=>{
        console.log(inputRef.current?.value)
        
    }


    return (
        <div>
            <div className="navbar_top"></div>
            <input ref={inputRef} />
      <div>{count}</div>
      <button onClick={() => dispatch(increment())}>+1</button>
      {/* <button onClick={() => dispatch(incrementAsync(2))}>+2</button> */}
      <button onClick={() => {
        dispatch(decrement())
        getRef()
      }}>-1</button>
2
        </div>
    )
}
export default Page404